<template>
  <div>
    <div class="box-aa">
      <span>城市列表</span>
      <router-link to="/home"><span>返回</span> </router-link>
    </div>
    <div>
      <!-- <div class="box-bb">
        <p>最近访问城市</p>
        <div>
          <span>广州</span>
          <span>安阳</span>
          <span>阿拉善盟</span>
        </div>
      </div> -->
    </div>
    <van-index-bar>
      <template v-for="(item, index) in city">
        <van-index-anchor :key="index" :index="item.initial" />
        <van-cell
          v-for="(i, ikey) in item.list"
          :key="index + '-' + ikey"
          :title="i.name"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "City",
  data() {
    return {
      city: [],
    };
  },
  mounted() {
    axios.get("city.json").then((res) => {
      this.city = res.data.city;
    });
  },
};
</script>

<style scoped>
.box-aa {
  display: flex;
  justify-content: space-between;
}
.box-bb{

}
</style>
